/**
 * @Author:周邱艳
 * @Date:20200615
 * @Describle:这是组合详情页
 */

import React, { Component } from "react";
import {Card} from "antd";
import ReactEcharts from "echarts-for-react";
import axios from "axios";
import {URL} from '../../../index'

const spirit = 'image://';

const  maxData = 11;

export default class Fourth extends Component{
    //返回柱状图的配置对象
    constructor(props) {
        super(props);
        this.state={
            userPositionList:[],//总表
            names:[],//数据
            uptitle:[],//表名
            totalData:[]//总数据
        }
        this.getCategorys=this.getCategorys.bind(this)
    }
    getCategorys = () => {
        //数据请求
        axios({
            method:"GET",
            url:URL+"/wealthPosition/showPositionTop5ForUser",
            params:{comBaseId:this.props.portfolioId}
        }).then(
            (res) => {
                console.log(res.data.userPositionList)
                //状态码判断
                if(res.data.code===200){
                    var names = [];//初始化数据
                    var uptitle=[]//初始化小标识名
                    var totalData=[]//总数据
                    for (let i=0;i<res.data.userPositionList.length;i++){
                        var name=res.data.userPositionList[i]["userName"]
                        console.log(name)
                        var value=res.data.userPositionList[i]["positionDays"]
                        console.log(value)
                        //数据合成
                        names.push({value})
                        console.log(names)
                        //标识名合成
                        uptitle.push(name)
                        //总数据
                        totalData.push(value)
                        console.log(totalData)
                    }
                    //数据更新
                    this.setState({
                        comPositionRadioForUser:res.data.comPositionRadioForUser,
                        names:names,
                        uptitle:uptitle,
                        totalData:totalData
                    })
                    //状态码判断
                }else if(res.data.code === 500){
                    this.props.history.push('/serverError')
                }

            }
        ).catch(function (error) {//异常处理
            console.log(error);
        })
    }
    //组件挂载后
    componentDidMount() {
        this.getCategorys()
    }
    //echarts可视化
    getOption1=()=>{
        return{
            tooltip: {
            },
            xAxis: {
                max: maxData,
                splitLine: {show: false},
                offset: 10,
                axisLine: {
                    lineStyle: {
                        color: '#999'
                    }
                },
                axisLabel: {
                    margin: 10
                }
            },
            yAxis: {
                data: this.state.uptitle,
                inverse: true,
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {
                    margin: 10,
                    color: '#999',
                    fontSize: 16
                }
            },
            grid: {
                top: 'center',
                height: 200,
                left: 70,
                right: 100
            },
            series: [{
                // current data
                type: 'pictorialBar',
                symbol: spirit,
                symbolRepeat: 'fixed',
                symbolMargin: '5%',
                symbolClip: true,
                symbolSize: 30,
                symbolBoundingData: maxData,
                data: this.state.totalData,
                markLine: {
                    symbol: 'none',
                    label: {
                        formatter: 'max: {c}',
                        position: 'start'
                    },
                    lineStyle: {
                        color: 'green',
                        type: 'dotted',
                        opacity: 0.2,
                        width: 2
                    },
                    data: [{
                        type: 'max'
                    }]
                },
                z: 10
            }, {
                // full data
                type: 'pictorialBar',
                itemStyle: {
                    normal: {
                        opacity: 0.2
                    }
                },
                label: {
                    show: true,
                    position: 'right',
                    offset: [10, 0],
                    color: 'green',
                    fontSize: 18
                },
                animationDuration: 0,
                symbolRepeat: 'fixed',
                symbolMargin: '5%',
                symbol: spirit,
                symbolSize: 30,
                symbolBoundingData: maxData,
                data: this.state.totalData,
                z: 5
            }]
        };

    }
    //数据渲染
    render() {

        return(
            <div style={{width:"33%",height:"33%"}}>
                <Card title='购买此组合持仓金额TOP.5的用户的持仓天数'>
                    <ReactEcharts option={this.getOption1()} style={{height: 400}}/>
                </Card>
            </div>
        )
    }
}
